<template>
	<view class="container">
		<view class="margin-tb-sm text-center txstyle">
			<image class="image cu-avatar lgx" :src="avatar" @tap="uploadTap"> </image>
		</view>
		<view class="padding flex flex-direction">
			<text class="text-gray sm text-center textaaa">点击上面的头像选择图片</text>
		</view>
		<view @tap="uploadTap" class="clickstyle">点击选取图片</view>
		<view class="ksp-image-cutter" style="display: none;">
			<canvas style="width: 60px; height: 60px; position: relative;" :avatarSrc="avatar" canvas-id="target"></canvas>
			<view class="body">
				<view class="plank">
					<view class="frame" style="left: 50px; top: 50px; width: 60px; height: 60px;">
						<view class="rect"></view>
						<view class="line-one"></view>
						<view class="line-two"></view>
						<view class="line-three"></view>
						<view class="line-four"></view>
						<view class="frame-left"></view>
						<view class="frame-right"></view>
						<view class="frame-top"></view>
						<view class="frame-bottom"></view>
						<view class="frame-left-top"></view>
						<view class="frame-left-bottom"></view>
						<view class="frame-right-top"></view>
						<view class="frame-right-bottom"></view>
					</view>
				</view>
			</view>
			<view class="toolbar">
				<button class="btn-cancel">取消</button>
				<button class="btn-ok">确定</button>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				avatar:'/static/default.png',
				userinfo:[]
			};
		},
		onLoad: function (option) {
			this.helper.checkLogin();
			this.getData();
		},
		methods: {
			getData:function(){
				//获取基础参数
				// uni.showLoading({
				// 	title:"数据加载中",
				// 	mask:true
				// })
				var info = uni.getStorageSync("userinfo");
				let timestamp = this.helper.now();
				let sign = this.helper.setSign(['username='+info.username,'token='+info.token,'timestamp='+timestamp]);
				this.helper.req({
					api:"getUserInfo",
					timestamp:timestamp,
					data:{username:info.username,token:info.token},
					header:{sign:sign},
					method:'GET',
				}).then(res=>{
					this.userinfo = res.data.data.userinfo;
					if(this.userinfo.avatar){
						this.avatar = this.weburl + this.userinfo.avatar;
					}
					setTimeout(() => {
						uni.hideLoading();
					}, 300);
				})
			},
			//链接
			toUrl:function(e){
				uni.navigateTo({
					url: e,
				});	
			},
			uploadTap:function(e){
				let that = this;
				uni.chooseImage({
					count: 1, // 默认9
					sizeType: ['compressed'], // 可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
					success(res) {
						// this.avatar = res.tempFilePaths[0];
						that.uploadFiles(res.tempFilePaths[0]);
					}
				});
			},
			//上传图片
			async uploadFiles(image){		
				uni.showLoading({
					title: '请稍后..',
					mask: true,
				})

				const uploadUrl = await this.uploadImage(image);
				
				setTimeout(() => {
					uni.hideLoading();
				}, 300);
				
				if(uploadUrl){
					this.avatar = this.weburl + uploadUrl.url;
					uni.showToast({
						title: '头像上传成功',
						icon: 'success',
						mask: true,
						duration: 2000
					});
				}else{
					//上传失败处理
					uni.showToast({
						title: '上传中出现问题，已终止上传',
						icon: 'none',
						mask: true,
						duration: 2000
					});
				}

			},
			uploadImage: function(file){
				return new Promise((resolve, reject)=> {
					var info = uni.getStorageSync("userinfo");
					let timestamp = this.helper.now();
					
					//发送给后端的附加参数
					const formData = {
						token:info.token
					};

					let sign = this.helper.setSign(['token='+info.token,'timestamp='+timestamp]);
					
					this.uploadTask = uni.uploadFile({
						url: this.helper.getWebsiteUrl() +"uploadFile?timestamp=" + timestamp, 
						filePath: file,
						name: 'file',
						formData: formData,
						header:{"sign":sign},
						success(uploadFileResult){
							const uploadFileRes = JSON.parse(uploadFileResult.data) || {};
							if(uploadFileRes.errorcode === 0 && uploadFileRes.data){
								resolve(uploadFileRes.data);
							}else{
								reject('接口返回错误');
							}
							
						}, 
						fail(){
							
						}
					});
				});
			},
		},
	};
</script>

<style lang="scss">
	page{
	  background: #b6ccf2;
	}
	.textaaa{
		color: #353535;
	}
	.clickstyle{
		width: 560rpx;
		margin: 50rpx auto 0 auto;
		height: 60rpx;
		line-height: 60rpx;
		border-radius: 10rpx;
		background: linear-gradient(to bottom, #a1c3ff, #4f8efd);
		text-align: center;
		color: #fff;
		
	}
	.cu-avatar.lgx {
		width: 260upx;
		height: 260upx;
		border-radius: 50%;
		overflow: hidden;
	}
	.ksp-image-cutter {
		position: absolute;
		width: 100%;
		height: 100%;
		top: 0;
		bottom: 0;
		z-index: 1000;
		.body {
			position: absolute;
			left: 0upx;
			right: 0upx;
			top: 0upx;
			bottom: 100upx;
			background: #000;
			overflow: hidden
		}
		.mask {
			position: absolute;
			left: 0upx;
			right: 0upx;
			top: 0upx;
			bottom: 0upx;
			background: #000;
			opacity: .4
		}
		.plank {
			position: absolute;
			left: 0upx;
			right: 0upx;
			top: 0upx;
			bottom: 0upx
		}
		.image {
			position: absolute
		}
		.frame {
			position: absolute
		}
		.canvas {
			position: absolute;
			display: block;
			left: 0;
			top: 0
		}
		.rect {
			position: absolute;
			left: -4upx;
			top: -4upx;
			width: 100%;
			height: 100%;
			border: 4upx solid #fff
		}
		.line-one {
			position: absolute;
			width: 100%;
			height: 2upx;
			background: #fff;
			left: 0;
			top: 33.3%
		}
		.line-two {
			position: absolute;
			width: 100%;
			height: 2upx;
			background: #fff;
			left: 0;
			top: 66.7%
		}
		.line-three {
			position: absolute;
			width: 2upx;
			height: 100%;
			background: #fff;
			top: 0;
			left: 33.3%
		}
		.line-four {
			position: absolute;
			width: 2upx;
			height: 100%;
			background: #fff;
			top: 0;
			left: 66.7%
		}
		.frame-left {
			position: absolute;
			height: 100%;
			width: 16upx;
			left: -8upx;
			top: 0
		}
		.frame-right {
			position: absolute;
			height: 100%;
			width: 16upx;
			right: -8upx;
			top: 0
		}
		.frame-top {
			position: absolute;
			width: 100%;
			height: 16upx;
			top: -8upx;
			left: 0
		}
		.frame-bottom {
			position: absolute;
			width: 100%;
			height: 16upx;
			bottom: -8upx;
			left: 0
		}
		.frame-left-top {
			position: absolute;
			width: 40upx;
			height: 40upx;
			left: -12upx;
			top: -12upx;
			border-left: 8upx solid red;
			border-top: 8upx solid red
		}
		.frame-left-bottom {
			position: absolute;
			width: 40upx;
			height: 40upx;
			left: -12upx;
			bottom: -12upx;
			border-left: 8upx solid red;
			border-bottom: 8upx solid red
		}
		.frame-right-top {
			position: absolute;
			width: 40upx;
			height: 40upx;
			right: -12upx;
			top: -12upx;
			border-right: 8upx solid red;
			border-top: 8upx solid red
		}
		.frame-right-bottom {
			position: absolute;
			width: 40upx;
			height: 40upx;
			right: -12upx;
			bottom: -12upx;
			border-right: 8upx solid red;
			border-bottom: 8upx solid red
		}
	}
	.toolbar {
		position: absolute;
		width: 100%;
		height: 100upx;
		left: 0upx;
		bottom: 0upx;
		box-sizing: border-box;
		border-bottom: 2upx solid silver;
		background: #f8f8f8
	}
	.btn-cancel {
		position: absolute;
		left: 100upx;
		top: 12upx;
		font-size: 30upx;
		line-height: 30upx;
		padding: 20upx;
		color: #333
	}
	.btn-ok {
		position: absolute;
		right: 100upx;
		top: 12upx;
		font-size: 30upx;
		line-height: 30upx;
		padding: 20upx;
		color: #333
	}
</style>
